/**
 * Created by 86185 in 2020/8/30 on 18:37
 */
import React from "react"

import "@/components/common/Radar/Radar.component.styl"

class Radar extends React.Component {
    constructor(props) {
        super(props);
    }

    initChart() {
        let {id, indicator, seriesData} = this.props.radarData;
        let myChart = echarts.init(document.getElementById(`${id}-radar-chart`));
        let option = {
            tooltip: {
                // confine: true,
                enterable: true
            },
            radar: {
                name: {
                    textStyle: {
                        color: "#bfbebe",
                    },
                    formatter: function (text, params) {
                        if (!params.lineBreak) return text;
                        let textLen = text.length;
                        if (textLen % 4) {
                            text = text.replace(/\S{4}/g, function (match) {
                                return `${match}\n`
                            });
                        } else {
                            text = text.replace(/\S{4}/g, function (match) {
                                return `${match}\n`
                            });
                            textLen = text.length;
                            text = text.substring(0, textLen - 1);
                        }
                        return text;
                    }
                },
                center: ["50%", "55%"],
                indicator,
                // splitNumber: 3,
                splitLine: {
                    lineStyle: {
                        color: "rgba(187,187,187,0.18)",
                    },
                },
                splitArea: {
                    areaStyle: {
                        color: "#093068"
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(187,187,187,0.18)",
                    },
                }
            },
            series: [
                {
                    type: "radar",
                    symbolSize: 8,
                    lineStyle: {
                        color: "#02CDE6"
                    },
                    areaStyle: {
                        color: "#02CDE6",
                        opacity: 0.2
                    },
                    itemStyle: {
                        color: "#02CDE6"
                    },
                    label: {
                        show: true,
                        formatter: function (params) {
                            return params.value;
                        }
                    },
                    data: seriesData
                }
            ]
        };
        window.onresize = function () {
            myChart.resize();
        };
        myChart.setOption(option);
    }

    componentDidMount() {
        this.initChart();
    }

    render() {
        return (
            <div id={`${this.props.radarData.id}-radar-chart`} className="radar-chart">

            </div>
        )
    }
}

export default Radar
